<template>
  <div class="app">
    <h2>{{ names.firstName + " " + names.lastName }}</h2>
    <h2>{{ fullName }}</h2>
    <button @click="setFullname">设置fullName计算属性</button>
    <h2>{{ scoreResult }}</h2>
  </div>
</template>

<script>
/*
computed()
  接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。
  它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
* */
import {reactive, computed, ref} from "vue";

export default {
  name: 'App',
  setup(props, context) {
    const names = reactive({
      firstName: "陶",
      lastName: "品",
    })
    const score = ref(60)

    /*
      computed计算属性：函数写法
      const fullName = computed(() => {
      return names.firstName + names.lastName
    })
     */
    // computed计算属性：对象写法
    let fullName = computed({
      get() {
        return names.firstName + " " + names.lastName
      },
      set(newValue) {
        let newNames = newValue.split(" ")
        names.firstName = newNames[0]
        names.lastName = newNames[1]

      }
    })
    // computed计算属性：函数写法
    const scoreResult = computed(() => {
      return score.value >= 60 ? "及格" : "未及格"
    })

    const setFullname = () => {
      fullName.value = "coder why"
    }
    return {
      names,
      fullName,
      scoreResult,
      setFullname
    }
  }
}
</script>

<style lang="less"></style>
